<template>
  <div>
    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >系统设置</el-breadcrumb-item>
        <el-breadcrumb-item >角色设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>


 <!-- 用户信息 -->
    <div class="uset-div">
      <!-- 表格上面的title -->
      <div class="uset-button">
           <el-button type="primary" plain @click="roleAddVisible = true">新增</el-button>
           &emsp;
           <el-button type="success" plain @click="roleQueryVsible = true">查询</el-button>
      </div>


     <vxe-table
        v-loading="loading"
        border
        show-header-overflow
        show-overflow
        highlight-hover-row
        align="center"
        :data="tableData">
        <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
        <vxe-table-column field="roleName" title="角色"></vxe-table-column>
        <vxe-table-column field="description" title="描述"></vxe-table-column>
        <vxe-table-column  title="操作" min-width="200">
          <template v-slot="{ row }">
            <el-button type="text" size="small" @click="menuListVisible(row)">分配权限</el-button>
            <el-button @click="editorRoleVisible(row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="deleteRoleVisible(row.roleId)">删除</el-button>
          </template>
        </vxe-table-column>
      </vxe-table>


      <!-- 分配权限 -->
      <el-dialog
        title="权限分配"
        :visible.sync="dialogVisible"
        width="40%"
        :close-on-click-modal="false"
        >
        <!-- 输入框 -->
        <div style="display: flex;justify-content: center;align-items: flex-start;">
          <el-input
            placeholder="请输入权限"
            :style="{width:70+'%'}"
            v-model="this.input"
            clearable>
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button type="text" :style="{marginLeft:20+'px'}" @click="showAuthority">全部展开</el-button>
        </div>

        <!-- 多选框 -->
        <el-checkbox-group v-model="checkList" v-show="isShow">
          <div style="display: flex;flex-direction: column;justify-content: flex-start;margin: 30px 50px;">
            <el-checkbox :label="item.menuName" style="margin: 10px 0px;" v-for="item in authorityList" :key="item.menuName"></el-checkbox>
          </div>
        </el-checkbox-group>

          <!-- 提交按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="authorityDistribut">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 角色添加 -->
     <el-dialog
      title="新增角色"
      :visible.sync="roleAddVisible"
      width="35%"
      :close-on-click-modal="false">
        <el-form :model="addRoleForm">
          <el-form-item label="角色名称:" :label-width="formLabelWidth" >
            <el-input v-model="addRoleForm.roleName" autocomplete="off"  placeholder="请输入新角色"></el-input>
          </el-form-item>
          <el-form-item label="角色描述:" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="4"
              :show-word-limit="true"
              placeholder="请对角色进行描述"
              v-model="addRoleForm.description">
            </el-input>
          </el-form-item>
        </el-form>

        <div style="text-align: right;height: 50px;">
          <el-button type="primary" @click="addRole">确 定</el-button>
          <el-button @click="roleAddVisible = false">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 分页 -->
     <div style="width: 100%;text-align: right;margin: 10px 5px;">
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="pageInfo.currentPage"
         :page-sizes="[10,20,50,100, 200, 300, 400]"
         :page-size="10"
         layout="total, sizes, prev, pager, next, jumper"
         :total="this.pageInfo.count">
       </el-pagination>
      </div>

      <!-- 角色删除弹窗 -->
      <el-dialog
        title="角色删除确认"
        :visible.sync="deleteDialogVisible"
        :close-on-click-modal="false"
        width="25%"
        >
        <div style="display: flex;justify-content: center;align-items: center;margin-bottom: 20px;">
          <i class="iconfont" style="color: red;font-size: 40px;margin-right: 30px;">&#xe6d6;</i>
          <div>
            <p><span style="color: red;">删除后不可恢复</span></p></br>
            <p>是否继续?</p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteRole">继续删除</el-button>
        </span>
      </el-dialog>


      <!-- 角色编辑 -->
     <el-dialog
      title="编辑角色"
      :visible.sync="roleEditorVisible"
      width="35%"
      :close-on-click-modal="false">
        <el-form :model="editorRoleForm">
          <el-form-item label="角色名称:" :label-width="formLabelWidth" >
            <el-input v-model="editorRoleForm.roleName" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="角色描述:" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="4"
              :show-word-limit="true"
              v-model="editorRoleForm.description">
            </el-input>
          </el-form-item>
        </el-form>

        <div style="text-align: right;height: 50px;">
          <el-button type="primary" @click="editorRole">确 定</el-button>
          <el-button @click="roleEditorVisible = false">取 消</el-button>
        </div>
      </el-dialog>


      <!-- 角色 添加弹窗 -->
      <vxe-modal v-model="roleQueryVsible" title="角色查询" width="600" resize destroy-on-close>
        <vxe-form :data="queryForm" title-align="right" title-width="100">
          <vxe-form-item title="角色名:" field="roleName" span="24" :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item>

          <vxe-form-item align="right" span="24">
            <vxe-button type="submit" status="primary" @click="QueryClick">保存</vxe-button>
            <vxe-button @click="roleQueryVsible = false">取消</vxe-button>
          </vxe-form-item>
        </vxe-form>
      </vxe-modal>

    </div>
  </div>
</template>

  <script>
    import RoleApi from '@/api/roleApi'
    export default {
      data() {
        return {
          // 查询
          queryForm:{
            roleName:''
          },
          loading:false,
          // 临时存储roleId
          theRoleId:'',
          // 添加角色
          roleAddVisible:false,
          // 编辑角色
          roleEditorVisible:false,

          formLabelWidth: '80px',
          // 角色form
          addRoleForm:{
            roleName:'',
            description:""
          },
          // 编辑角色form
          editorRoleForm:{
            roleName:'',
            description:"",
            roleId:""
          },
          // 权限分配搜索框
          input:'',
          // 分页
          pageInfo:{
            pageSize:10,
            currentPage: 1,
            count:0
          },

          // 菜单分页
          menuPageInfo:{
            pageSize:10,
            currentPage: 1,
            count:0
          },
           // 角色删除信息
          deleteRoleForm:{
            roleId:'',
          },
          // 角色已有的权限
          checkList: [],
          // 所有的权限list
          authorityList:[],
          isShow:false,

          // 角色列表
          tableData: [],
          // 分配权限
          dialogVisible: false,
          // 角色删除弹窗
          deleteDialogVisible:false,
          // 角色查询
          roleQueryVsible:false
        }
      },
      methods:{
        handleChange(res){
          console.log(res)
        },
        // 展示全部权限列表
        showAuthority(){
          this.isShow = this.isShow === true ? false:true
        },
        // 添加角色
        addRole(){
          RoleApi.roleAdd(this.addRoleForm).then(res => {
            if(res.data.status === "200"){
              //重新获取角色列表
              RoleApi.roleList(this.pageInfo.currentPage,this.pageInfo.pageSize).then(res => {
                this.tableData = res.data.data.records
                //总数
                this.pageInfo.count = res.data.data.total
              })
              // 提示成功
              this.$notify({
                title: '成功',
                message: '角色添加成功！',
                type: 'success',
                duration:1000
              });
              // 关闭弹窗
              this.roleAddVisible = false
              //清楚添加框
              this.addRoleForm.roleName = ''
              this.addRoleForm.description = ""

            }else{
              // 修改失败
             this.$notify.error({
               title: '错误',
               message: '角色添加失败！'
             });
            }
          })
        },

        // 删除角色
        deleteRole(){
          RoleApi.roleDele(this.deleteRoleForm.roleId).then(res => {
            if(res.status === 200){
              // 重新获取角色列表
              RoleApi.roleList(this.pageInfo.currentPage,this.pageInfo.pageSize).then(res => {
                this.tableData = res.data.data.records
                //总数
                this.pageInfo.count = res.data.data.total

                // 关闭弹窗
                this.deleteDialogVisible = false
              })
            }else{
              this.$notify.error({
                title: '错误',
                message: '角色删除失败！'
              });
            }
          })
        },

        // 删除弹窗
        deleteRoleVisible(roleId){
          // 角色id
          this.deleteRoleForm.roleId = roleId

          // 打开弹窗
          this.deleteDialogVisible  = true
        },
        //每页大小
        handleSizeChange(val) {
          //赋值
          this.pageInfo.pageSize = val
          // 将页数置为1
          this.pageInfo.currentPage = 1
          // 获取角色列表
          RoleApi.roleList(this.pageInfo.currentPage,this.pageInfo.pageSize).then(res => {
            this.tableData = res.data.data.records
            //总数
            this.pageInfo.count = res.data.data.total
          })

        },
        // 第几页
        handleCurrentChange(val) {
          //赋值
          this.pageInfo.currentPage = val
          // 获取角色列表
          RoleApi.roleList(this.pageInfo.currentPage,this.pageInfo.pageSize).then(res => {
            this.tableData = res.data.data.records
            //总数
            this.pageInfo.count = res.data.data.total
          })
        },
        // 编辑角色
        editorRoleVisible(roleInfo){
          // 赋值
          this.editorRoleForm.roleName = roleInfo.roleName
          this.editorRoleForm.description = roleInfo.description
          this.editorRoleForm.roleId = roleInfo.roleId
          // 弹窗展示
          this.roleEditorVisible = true
        },
        // 确认修改角色
        editorRole(){
          this.loading = true
          RoleApi.roleEditor(this.editorRoleForm).then(res => {
           // 判断是否修改成功
           if(res.data.status === "200"){

             // 重新获取角色列表
             // 获取角色列表
             RoleApi.roleList(this.pageInfo.currentPage,this.pageInfo.pageSize).then(res => {
               this.tableData = res.data.data.records
               //总数
               this.pageInfo.count = res.data.data.total
               this.loading =false
             })
             // 关闭弹窗
             this.roleEditorVisible = false

             // 提示成功
             this.$notify({
               title: '成功',
               message: '角色修改成功！',
               type: 'success',
               duration:1500
             });
           }
          })
        },
		// 获取权限list
        menuListVisible(Info){
          // 保存零时RoleId
          this.theRoleId = Info.roleId
          // 清空一下以前的anthorityList
          this.authorityList = []
          // 获取权限
          RoleApi.roleMenuHaveList(Info.roleId).then(res => {
                if(res.data.status === "200"){
                  res.data.data.list.forEach((item,index,arr)  => {
                    // 所有的菜单list
                    this.authorityList.push(item.t)
                  })
                  // 角色已经有的权限list
                  if(res.data.data.roleMenu === null){
                    this.checkList = []
                  }else{
                    // this.checkList = res.data.data.roleMenu
                    // 这里返回来的roleMenu是menuIds: ["10000", "50000", "70000"]
                    // 需要将进行匹配名字
                    res.data.data.roleMenu.menuIds.forEach((item,index,arr) => {
                      this.authorityList.forEach((item1,index1,arr1) => {
                        // 通过遍历来获取到菜单名
                        if(item === item1.menuId){
                          this.checkList.push(item1.menuName)
                        }
                      })
                    })

                  }
                }
                this.dialogVisible = true
          })
        },
        // 获取当前角色已经有的菜单权限
        getRoleHaveList(roleId){
          RoleApi.roleMenuHaveList(roleId).then(res => {

          })
        },
        // 权限分配
        authorityDistribut(){
          // 获取权限菜单id
          var menulist = []
          var n= 0
          this.checkList.forEach((item,index,arr) => {
            this.authorityList.forEach((item1,index1,arr1) => {
              if(item === item1.menuName){
                menulist[n] = item1.menuId
                n = n + 1
              }
            })
          })

          // 更新权限
          RoleApi.roleMenuReset(this.theRoleId,menulist).then(res => {
            if(res.data.status === "200"){
              // 关闭弹窗
              this.dialogVisible = false
            }
          })
        },
        // 查询
        QueryClick(){
          RoleApi.roleQuery(this.queryForm.roleName).then(res => {
            if((res.data.status === "200")){
              this.tableData = res.data.data
              this.roleQueryVsible = false
            }
          })
        }
      },
      created() {
        // 获取角色列表
        this.loading = true
        RoleApi.roleList(this.pageInfo.currentPage,this.pageInfo.pageSize).then(res => {
          this.tableData = res.data.data.records
          //总数
          this.pageInfo.count = res.data.data.total
          this.loading = false
        })
      }
    }
  </script>

<style>
  .uset-div{
      padding: 20px;
      background-color: #FFFFFF;
      border-radius: 8px;
    }
    .uset-button{
      /* width: 100%; */
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 40px;
      margin: 10px 0px;
      color: #409EFF;
      font-size: 18px;
    }
    .el-table th{
      background-color: #E4E7ED;
      color: black;
      max-height: 10px;
    }
    .el-dialog__header{
      height: 40px;
      margin: 0px 20px;
      font-weight: 600;
      text-align: left;
    }
    .el-dialog__body{
      padding: 0px 30px;
    }
    .el-form-item__label{
      text-align: center;
    }
</style>
